<template>
<div class="abc">
    <child :arrs="arr"></child>
            <table>
                <tr>
                    <td><input type="checkbox" @change="chickeds" v-model="chicked"></td>
                    <td>产品图片</td>
                    <td>编号</td>
                    <td>品牌名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in arr" :key="item.id" class="abc">
                    <td><input type="checkbox" v-model="chicks" :value="item" @change="int"></td>
                    <td class="tu"><img :src="item.pic" alt=""></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    
                    <td>
                        <button @click="jian(item)" :disabled="item.num<=1">-</button>
                        {{item.num}}
                        <button @click="jia(item)" >+</button>
                    </td>
                    
                    <td><button @click="del(index)">删除</button></td>
                    <!-- <div>{{int}}</div> -->
                </tr>
                <tr>
                    <td colspan="7" :class="['last2',{last:arr.length!==0}]">没有更多数据了</td>
                </tr>
                <!-- <button @click="local2">保存</button> -->
            </table>
            <div style="text-align:center">总价:{{total}}</div>
        </div>

</template>

<script >
import { computed } from 'vue'
import child from "./child.vue"
    export default{
        data () {
            return {
                arr:JSON.parse(localStorage.getItem('usermsg'))||[
                {pic:'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1122879666_1184688902_88_88.png',id:1,name:'小米',price:'500',num:1},
                {pic:'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1734787630_-1197286040_88_88.png',id:2,name:'华为',price:'600',num:2},
                {pic:'https://dss0.bdstatic.com/-0U0bXSm1A5BphGlnYG/tam-ogel/-1416243231_-35211708_88_88.jpg',id:3,name:'苹果',price:'700',num:2},
                ],
                chicks:[],
                chicked:false,

            }
        },
        components:{
            child
        },
        methods:{
            del(index){
                this.arr.splice(index,1)
                localStorage.setItem('usermsg',JSON.stringify(this.arr))
            },
            chickeds(){
                if(this.chicked){
                    this.chicks=this.arr
                }else{
                    this.chicks=[]
                }
            },
            int(){
                if(this.chicks.length===this.arr.length){
                    this.chicked=true
                }else{
                    this.chicked=false
                }
            },
            jia(a){
                a.num++
            },
            jian(b){
                 b.num--

            }

        },
        computed:{
            total(){
                let i = this.chicks.reduce((a,b)=>{
                        return a +=b.price*b.num
                    },0)
                    return i.toFixed(2)
            }
        }
    }
</script>

<style scoped>
*{
        margin: 0;
        padding: 0;
    }
    #app div{
        width: 600px;
        border: 1px solid;
        margin-top: 10px;
        padding: 10px;
    }
    table tr:nth-child(1){
        background-color: aqua;
        
    }
    table tr:nth-child(1) td{
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        text-align: center;
        /* width: 100px; */
        color: white;
        border: 1px solid black;
    }
    img{
        width: 40px;
        height: 40px;
        border: 0;
    }
    .tu{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    td{
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
        text-align: center;
        color: black;
        border: 1px solid;
    }
    table{
        border-collapse: collapse;
        position: relative;
    }
    .last{
        display: none;
    }
    .last2{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>